<template>
    <div>
      <div class="opt-area-02">
        <div class="right-con">
          <div class="input-frame" style="width: 164px">
            <Input type="text" placeholder="请输入姓名" style="width: 164px" v-model="params.name"
                   icon="ios-search"/>
          </div>
          <div class="input-frame" style="width: 164px">
            <Input type="text" placeholder="请输入身份证号" style="width: 164px" v-model="params.card_no"
                   icon="ios-search"/>
          </div>
          <div class="input-frame" style="width: 164px">
            <Input type="text" placeholder="请输入联系方式" style="width: 164px" v-model="params.mobile"
                   icon="ios-search"/>
          </div>
          <Button type="info" size="small" @click="init()" style="margin-top: 5px">搜索</Button>
        </div>
      </div>
      <template>
        <Table border :columns="columns" :data="data">
          <template slot-scope="{ row }" slot="is_completion">
            <span v-if="row.is_completion==='0'">是</span>
            <span v-else>是</span>
          </template>
          <template slot-scope="{ row }" slot="file_url">
            <Button size="small" v-if="row.is_completion==='0'" type="info" @click="updateInfo(row)">补充</Button>
            <Button size="small" v-else type="success" @click="checkInfo(row)">查看</Button>
          </template>
        </Table>
        <Row v-if="loadData == true">
          <Col class="demo-spin-col" span="8" offset="8">
            <Spin fix>
              <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
              <div>数据正在加载</div>
            </Spin>
          </Col>
        </Row>
        <Row type="flex" justify="end" class="page_style">
          <Page :current="params.pageNo" :total="params.totalRecord" show-sizer :page-size="params.pageSize"
                show-total @on-change="pageAction" @on-page-size-change="pageSizeChange"/>
        </Row>
      </template>
      <Modal
      v-model="modal1"
      title="补充信息"
      @on-ok="ok">
        <template>
          补充人姓名：<Input v-model="completion_user" style="width: 300px;margin-bottom: 10px" />
        </template>
        <Upload multiple action="http://120.27.63.37:38081/api/ac/file/fileCommonService/upLoadFiles" :before-upload="beforeUpload">
          <Button icon="ios-cloud-upload-outline">上传图片</Button>
          <span style="margin-left: 250px">请上传小于8M的图片</span>
        </Upload>
        <img :src="file_url" style="width: 100%"/>
    </Modal>
      <Modal
      v-model="modal2"
      title="查看图片信息">
        <template>
          补充人姓名：<Input v-model="completion_user" style="width: 300px;margin-bottom: 10px" />
        </template>
        <img :src="file_url" style="width: 100%">
    </Modal>
    </div>
</template>

<script>
import { findHatstateRegionsendCompletionList, updateFileUrlByID } from '../../../api/yi-qing-fang-kong'
import { createUpLoadFiles, getSign } from '../../../api/common'

export default {
  name: 'index',
  data () {
    return {
      columns: [
        {
          title: '姓名',
          key: 'name',
          fixed: 'left',
          minWidth: 150,
          align: 'center'
        },
        {
          title: '年龄',
          key: 'age',
          minWidth: 80,
          align: 'center'
        },
        {
          title: '证件类型',
          key: 'card_type',
          minWidth: 150,
          align: 'center'
        },
        {
          title: '证件号码',
          key: 'card_no',
          minWidth: 200,
          align: 'center'
        },
        {
          title: '性别',
          key: 'sex',
          minWidth: 50,
          align: 'center'
        },
        {
          title: '联系方式',
          key: 'mobile',
          minWidth: 150,
          align: 'center'
        },
        {
          title: '区/县',
          key: 'area',
          minWidth: 100,
          align: 'center'
        },
        {
          title: '街道',
          key: 'street',
          minWidth: 100,
          align: 'center'
        },
        {
          title: '社区',
          key: 'community',
          minWidth: 100,
          align: 'center'
        },
        {
          title: '具体地址',
          key: 'address',
          minWidth: 250,
          align: 'center'
        },
        {
          title: '来沈时间',
          key: 'arrive_time',
          minWidth: 100,
          align: 'center'
        },
        {
          title: '来沈交通方式',
          key: 'arrive_type',
          minWidth: 100,
          align: 'center'
        },
        {
          title: '来沈交通方式备注',
          key: 'arrive_type_remark',
          minWidth: 150,
          align: 'center'
        },
        {
          title: '来源地 省',
          key: 'originate_province',
          minWidth: 100,
          align: 'center'
        },
        {
          title: '来源地城市',
          key: 'originate_city',
          minWidth: 100,
          align: 'center'
        },
        {
          title: '创建时间',
          key: 'create_time',
          minWidth: 100,
          align: 'center'
        },
        {
          title: '来源',
          key: 'source',
          minWidth: 100,
          align: 'center'
        },
        {
          title: '是否需要补全',
          slot: 'is_completion',
          minWidth: 150,
          align: 'center'
        },
        {
          title: '补全人',
          key: 'completion_user',
          minWidth: 100,
          align: 'center'
        },
        {
          title: '补全图片',
          slot: 'file_url',
          fixed: 'right',
          minWidth: 100,
          align: 'center'
        }
      ],
      data: [],
      params: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0,
        name: '',
        card_no: '',
        mobile: ''
      },
      row: {},
      completion_user: '',
      file_url: '',
      modal1: false,
      modal2: false,
      loadData: true
    }
  },
  methods: {
    init () {
      let data = this.params
      this.data = []
      this.loadData = true
      findHatstateRegionsendCompletionList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.params.totalRecord = ret.data.data.totalRecord
          this.data = ret.data.data.results
          this.loadData = false
        } else {
          this.loadData = false
          this.$Notice.error({
            title: '查询列表信息失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    pageSizeChange (e) {
      this.params.pageSize = e
      this.init()
    },
    pageAction (page) {
      this.params.pageNo = page
      this.init()
    },
    ok () {
      let data = {
        id: this.row.id,
        completion_user: this.completion_user,
        file_url: this.file_url
      }
      updateFileUrlByID(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.init()
          this.completion_user = ''
          this.file_url = ''
          this.row = {}
        } else {
          this.$Notice.error({
            title: '补充失败！',
            desc: ret.data.errmsg
          })
        }
      })
    },
    checkInfo (e) {
      this.completion_user = ''
      this.file_url = ''
      this.row = {}
      this.row = e
      this.completion_user = e.completion_user
      this.file_url = e.file_url
      this.modal2 = true
    },
    updateInfo (e) {
      this.completion_user = ''
      this.file_url = ''
      this.row = {}
      this.row = e
      this.modal1 = true
    },
    beforeUpload (file) {
      let upPicData = {
        filePath: 'itemorder/yiqing/' + this.row.id,
        fileName: '补充材料.png'
      }
      const reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = () => {
        let index = reader.result.indexOf('base64,') + 7
        upPicData.file = reader.result.substring(index)
        this.upPic(upPicData)
      }
      return false
    },
    // 上传图片
    upPic (obj) {
      let timeStep = new Date().getTime().toString()
      let param = {
        filePath: obj.filePath,
        fileName: obj.fileName,
        timestamp: timeStep
      }
      getSign(param).then(res => {
        if (res.data.errcode === 0) {
          let uploadParam = {
            sign: res.data.data.sign,
            timestamp: timeStep,
            filePath: obj.filePath,
            fileName: obj.fileName,
            file: obj.file
          }
          createUpLoadFiles(res.data.data.docking_url, uploadParam).then(res => {
            if (res.data.errcode === 0) {
              this.file_url = res.data.data
              this.$Notice.success({ title: '上传成功' })
            } else {
              this.$Notice.error({ title: '上传失败', desc: res.data.data.msg })
            }
          })
        } else {
          this.$Notice.error({ title: '上传失败', desc: res.data.data.msg })
        }
      })
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style scoped>
  .page_style {
    margin: 20px 5px;
  }
  .opt-area-02 {
    display: flex;
    align-items: center;
    flex-direction: column;
    border: 1px solid #abdcff;
    background-color: #f0faff;
    padding: 8px 16px 8px 16px;
    border-radius: 4px;
    margin-bottom: 10px;
  }

  .opt-area-02 .right-con {
    width: 100%;
    margin-top: 5px;
    display: flex;
  }

  .opt-area-02 .left-con {
    font-size: 14px;
    width: 100%;
  }

  .opt-area-02 .left-con span {
    font-weight: bold;
  }

  .opt-area-02 .right-con input {
    width: 150px;
    margin-right: 10px;
  }

  .opt-area-02 .right-con .input-frame {
    width: 200px;
    margin-right: 10px;
  }
</style>
